<template>
	<div>
		<van-field
			:required="required"
			readonly
			:clickable="!disabled"
			:name="name"
			:rules="rules"
			v-model="value"
			:label="label"
			placeholder="请选择"
			@click="showPop"
		/>
		<van-popup v-model="showPicker" position="bottom">
			<van-datetime-picker
				:value.sync="selectDate"
				:type="type"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
		</van-popup>
	</div>
</template>

<script>
import dayjs from 'dayjs'
import { DatetimePicker } from 'vant'
export default {
	name: '',
	components: {
		'van-datetime-picker': DatetimePicker
	},
	props: {
		required: {
			type: Boolean,
			default: true
		},
		rules: {
			type: Array,
			default() {
				return [{ required: true }]
			}
		},
    		// 绑定标识
		name: {
			type: String,
			require: false
		},
		label: {
			type: String,
			default: ''
		},
		value: {
			type: [String,Number],
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'date'
		}
	},
	data() {
		return {
			showPicker: false
		}
	},
	computed: {
		selectDate() {
			return this.value ? new Date(this.value) : new Date(dayjs())
		}
	},
	methods: {
		showPop() {
			if (this.disabled) {
				return
			}
			this.showPicker = true
		},
		onConfirm(val) {
			this.$emit('update:value', dayjs(val).format('YYYY-MM-DD'))
			this.showPicker = false
		}
	}
}
</script>

<style scoped lang="scss"></style>
